<!----修改收货信息页---->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>收货信息修改页</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/modify_receipt_info.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.1-rc2/jquery.min.js"></script>
    <script src="js/bootstrap-datetimepicker.min.js"></script>
    <script src="js/laydate/laydate.js"></script>
</head>

<body>
    <div class="box container-fluid" >
        <header class="row">
        </header>

        <div class="row j_title">
            修改收货信息
        </div>
        <form method="post" class="row" id="user_info">
            <div class="j_form row">
                <div class="j_form_name col-xs-3" name="username">
                    姓名：
                </div>
                <div class=" col-xs-9">
                    <input type="text" size="12" value="胡履俊">
                </div>
            </div>
            <div class="j_form row">
                <div class="j_form_name col-xs-3">
                    手机：
                </div>
                <div class=" col-xs-9">
                    <input type="text" name="phone" value="15588833959">
                </div>
            </div>
            <div class="j_form row">
                <div class="j_form_name col-xs-3">
                    城市：
                </div>
                <div class=" col-xs-9">
                    <select name="city">
                        <option value="济南">济南</option>
                        <option value="泰安">泰安</option>
                        <option value="聊城">聊城</option>
                        <option value="青岛">青岛</option>
                    </select>
                    <select name="area">
                        <option value="市中区">市中区</option>
                        <option value="历下区">历下区</option>
                        <option value="历城区">历城区</option>
                        <option value="槐荫区">槐荫区</option>
                        <option value="天桥区">天桥区</option>
                        <option value="高新区">高新区</option>
                    </select>
                </div>
            </div>
            <div class="j_form row">
                <div class="j_form_name col-xs-3">
                    街道：
                </div>
                <div class=" col-xs-9">
                    <input type="text" size="30" name="street" value="历阳大街银丰大厦630室">
                </div>
            </div>
            <div class="j_form row">
                <div class="j_form_name col-xs-3">
                    收货时间：
                </div>
                <div class="col-xs-9">
                    <input type="text" size="10" name="receive_date" value="2018-02-07" id="datetimepicker">签收
                </div>
            </div>
            <div class="col-xs-12" id="modify_all" style="display: none">
                <p>您将 <b class="old_date">2018-02-07</b> 的订单 <b class="modify_action">提前7天</b> 派送 </p>
                <p><b class="old_date">2018-02-07</b> 后订单的派送时间：</p>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="0" checked>
                        保持不变
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="1">
                        全部<span class="modify_action">提前7天</span>派送
                    </label>
                </div>
            </div>
            <div class="col-xs-12">
                <button  type="button" class="g_btn" id="g_btn" > 修改信息 </button>
            </div>
        </form>
        <footer class="row footer">
            <img src="images/footer_logo.png" width="25%" alt="">
            <i class="fa fa-volume-control-phone" aria-hidden="true"></i>
            <span>客户电话：0531-89013310</span>
        </footer>
    </div>
</body>
<script>
    var oldDate = $("#datetimepicker").val();
    var newDate;
    function GetDateDiff(oldDate,newDate)
    {
        var oldTime = new Date(Date.parse(oldDate.replace(/-/g,   "/"))).getTime();
        var newTime = new Date(Date.parse(newDate.replace(/-/g,   "/"))).getTime();
        var dates = (newTime - oldTime)/(1000*60*60*24);
        return  dates;
    }
    laydate.render({
        elem: '#datetimepicker',//指定元素
        type: "date",
        done: function(value, date, endDate){
            //console.log(date)
           if(GetDateDiff(oldDate,value)<0){
               //console.log("日期提前了：" + Math.abs(GetDateDiff(oldDate,value)));
               $(".old_date").text(oldDate);
               $(".modify_action").text("提前" + Math.abs(GetDateDiff(oldDate,value)) + "天");
               $("#modify_all").css("display","block");
           }else if(GetDateDiff(oldDate,value) == 0){
               console.log("日期没有变动");
           }else{
               //console.log("日期推迟了：" + Math.abs(GetDateDiff(oldDate,value)));
               $(".old_date").text(oldDate);
               $(".modify_action").text("推迟" + Math.abs(GetDateDiff(oldDate,value)) + "天");
               $("#modify_all").css("display","block");
           };
        }
    });
    $("#g_btn").click(function(event){
        $.post('1.php',$("#user_info").serialize(),function(data,textStatus){
            event.preventDefault();
            var mask = '<div class="mask"></div>';
            var mask_box = '<div class="mask_box"></div>';
            var mask_main = '<div class="mask_main"><img src="images/duihao.png" width="100px" alt=""><h3>订单信息修改成功</h3></div>';
            $(mask).appendTo("body");
            $(mask_box).appendTo(".mask");
            $(mask_main).appendTo(".mask_box");
            var doc_w = $(window).width();
            var doc_h = $(window).height();
            var m_w = $(".mask_box").width();
            var m_h = $(".mask_box").height();
            $(".mask").width(doc_w);
            $(".mask").height(doc_h);
            $(".mask_box").width(doc_w-40);
            $(".mask_box").css("marginTop", doc_h/2-m_h/2);
            $(".mask").animate({opacity: "0"},2000,function(){
                $(".mask").remove();
            });
        });

    })
</script>
</html>
